<template>
  <div class="app">
    <Navigation title="首页"
                v-if="navShow">
      <template #left>
        <i class="iconfont icon-fanhui"
           @click="backAction"></i>
      </template>
    </Navigation>
    <loading></loading>

    <transition :name="animationName">
      <!-- <keep-alive :exclude='["Goods","Shop","Home"]'> -->
      <!-- transition包裹组件时可以对即将销毁的组件进行缓存，直到缓存组件动画结束以后销毁该缓存组件 -->
      <!-- <router-view></router-view> -->
      <!-- </keep-alive> -->
    </transition>

    <router-view class="view"></router-view>
    <TabBar :items="items"
            v-if="tabShow"></TabBar>

  </div>
</template>

<script>
import Navigation from "@/components/Navigation";
import TabBar from "@/components/TabBar_f";
import { mapMutations } from 'vuex';
import loading from "@/components/Loading_S";
export default {
  name: 'App',
  data: function () {
    return {
      items: [
        { iconName: "iconfont icon-elment", title: "外卖", to: { name: 'Home' } },
        { iconName: "iconfont icon-zhinanzhen", title: "搜索", to: { name: "Search" } },
        { iconName: "iconfont icon-dingdan", title: "订单", to: { name: "Order" } },
        { iconName: "iconfont icon-biaoqiankuozhan_wode-310", title: "我的", to: { name: "Mine" } },
      ],
      path: "/",
      animationName: '',

    }
  },

  components: {
    Navigation,
    TabBar,
    loading
  },
  methods: {
    backAction () {
      this.$router.go(-1);
    },
    jumpAction () {
      if (this.titleJump == true) {
        this.$router.push({ name: 'City' })
      }
    },
    ...mapMutations({
      changeNavSearch: "nav/changeNavSearch",
      changeNavTitle: "nav/changeNavTitle",
      changeNavLogin: "nav/changeNavLogin",
      changeNavBack: "nav/changeNavBack",
      changeNavShow: "nav/changeNavShow",
      changeTabIndex: 'tabBar/changeTabIndex',
      changeTabShow: 'tabBar/changeTabShow',
      titleJump: 'nav/titleJump'
    })
  },
  watch: {
    "$route": function (newV, oldV) {
      if (newV.meta.deep > oldV.meta.deep) {
        this.animationName = 'push';
      } else if (newV.meta.deep < oldV.meta.deep) {
        this.animationName = 'pop';
      } else {
        this.animationName = 'fade';
      }
      this.changeNavShow(newV.meta.deep != 0 ? true : false)
      // this.changeNavSearch(newV.meta.index == 0 && newV.meta.index == 1 ? true : false);

      this.changeNavSearch(newV.meta.index == 0 ? true : false);
      this.changeNavTitle(newV.meta.title);
      this.changeNavLogin(newV.meta.index == 0 ? true : false);
      this.changeNavBack(newV.meta.deep == 2 ? true : false);
      this.changeTabShow(newV.meta.deep != 1 ? false : true);

      if (newV.meta.deep == 1) {
        this.changeTabIndex(newV.meta.index);
      }
    }
  },
  computed: {
    tabShow: function () {
      return this.$store.state.tabBar.tabShow;
    },
    navShow: function () {
      return this.$store.state.nav.show;
    },
  }
}
</script>

<style lang="less">
* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

/*进入页面动画*/
// .push-enter-active,
// .push-leave-active,
// .pop-enter-active,
// .pop-leave-active {
//   will-change: transform;
//   transition: all 500ms;
//   position: absolute;
// }
// .pop-enter {
//   opacity: 0;
//   transform: translate3d(-100%, 0, 0);
// }
// .pop-leave-active {
//   opacity: 0;
//   transform: translate3d(100%, 0, 0);
// }
// .push-enter {
//   opacity: 0;
//   transform: translate3d(100%, 0, 0);
// }
// .push-leave-active {
//   opacity: 0;
//   transform: translate3d(-100%, 0, 0);
// }
//渐进渐出
.fade-enter {
  opacity: 0;
}
.fade-leave {
  opacity: 1;
}
.fade-enter-active {
  transition: opacity 0.5s;
}
.fade-leave-active {
  opacity: 0;
  transition: opacity 0.5s;
}
.fade-enter-active,
.fade-leave-active {
  height: 100%;
  width: 100%;
  will-change: transform;
  transition: all 500ms;
  position: absolute;
  // top:45.703px;
  backface-visibility: hidden;
}
</style>